piratezon_new/app/pages/site-manager/area/edit/[id].vue

<template>
  <div class="admin--page-content">
    <form @submit.prevent="handleSubmit" class="admin--form">
      <!-- 낚시지역 -->
      <table class="admin--form--table">
        <colgroup>
          <col style="width: 120px;">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <th>
              <div>
                지역명 <span class="admin--required">*</span>
              </div>
            </th>
            <td>
              <div class="input--wrap">
                <input
                  v-model="formData.name"
                  type="text"
                  class="admin--form-input"
                  placeholder="예: 부산/울산"
                  required
                />
                <p>시도 단위 지역명. 1~20자. 인접 시도 통합 시 슬래시(/) 사용 (예: 충남/세종)</p>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="admin--info--box">
        <h3>💡 지역 수정 안내</h3>
        <ul>
          <li>지역 = 회원 가입 시 선호 지역 선택 + 낚시어선/낚시터 분류 기준</li>
          <li>중복 등록 차단. 인접 시도 통합 표기 권장 (예: "충남" 대신 "충남/세종")</li>
        </ul>
      </div>

      <div class="admin--inf--box">
        <h3>🔄 영향</h3>
        <ul>
          <li>이 지역에 등록된 낚시어선, 낚시터의 지역 표시 즉시 갱신</li>
          <li>이 지역을 선호 지역으로 등록한 회원의 화면 표시 즉시 갱신</li>
          <li>외부 시스템(공공 데이터 API) 연동된 낚시어선/낚시터는 동기화 필요</li>
        </ul>
      </div>

      <!-- 버튼 영역 -->
      <div class="admin--form-actions">
        <button type="button" class="admin--btn" @click="goToDetail">
          ← 취소
        </button>
        <button type="submit" class="admin--btn admin--btn-red ml--auto" :disabled="isSaving">
          {{ isSaving ? "저장 중..." : "저장" }}
        </button>
      </div>

      <!-- 성공/에러 메시지 -->
      <div v-if="successMessage" class="admin--alert admin--alert-success">
        {{ successMessage }}
      </div>
      <div v-if="errorMessage" class="admin--alert admin--alert-error">
        {{ errorMessage }}
      </div>
    </form>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";

  definePageMeta({
    layout: "admin",
    middleware: ["auth"],
  });

  const route = useRoute();
  const router = useRouter();
  const { get, put } = useApi();

  const areaId = route.params.id;

  const isSaving = ref(false);
  const successMessage = ref("");
  const errorMessage = ref("");

  const formData = ref({
    name: "",
  });

  // 기존 데이터 로드
  const loadDetail = async () => {
    const { data, error } = await get(`/area/${areaId}`);

    if (error || !data?.success) {
      errorMessage.value = error?.message || data?.message || "조회에 실패했습니다.";
      return;
    }

    const row = data.data || {};
    formData.value = {
      name: row.name ?? "",
    };
  };

  // 폼 제출
  const handleSubmit = async () => {
    successMessage.value = "";
    errorMessage.value = "";

    const name = formData.value.name.trim();

    if (!name) return (errorMessage.value = "지역명을 입력하세요.");
    if (name.length > 20) return (errorMessage.value = "지역명은 20자 이내로 입력하세요.");

    isSaving.value = true;
    try {
      const { data, error } = await put(`/area/${areaId}`, { name });

      if (error || !data?.success) {
        errorMessage.value = error?.message || data?.message || "수정에 실패했습니다.";
      } else {
        successMessage.value = data.message || "수정되었습니다.";
        setTimeout(() => {
          router.push(`/site-manager/area/detail/${areaId}`);
        }, 800);
      }
    } catch (e) {
      errorMessage.value = "서버 오류가 발생했습니다.";
      console.error("Update error:", e);
    } finally {
      isSaving.value = false;
    }
  };

  // 이동
    const goToDetail = () => router.push(`/site-manager/area/detail/${areaId}`);

  onMounted(() => {
    loadDetail();
  });
</script>